<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
        <link href="../css/chart.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="../fonts/iconfont.css">
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">聊天</h1>
        </header>
        <div class="mui-content">
                <div class="main-body">
                    <!-- <section class="chatRoomTip">
                        <div>用户来了</div>
                    </section>
                    <section class="user clearfix">
                        <span>
                            <p class = "name">用户</p>
                            <img class = "user-img" src="../images/user.png">
                        </span>
                        <div>
                            1213asda
                        </div>
                    </section>
                    <section class="user clearfix">
                        <span>
                            <p class = "name">用户</p>
                            <img class = "user-img" src="../images/user.png">
                        </span>
                        <div><img class = "mess-img" src="../images/user.png"></div>
                    </section>
                    <section class="user clearfix">
                        <span>
                            <p class = "name">用户</p>
                            <img class = "user-img" src="../images/user.png">
                        </span>
                        <div style = "width:30%">
                            <i class="iconfont sound chart-yuyinshuru"></i>
                        </div>
                        <span class = "sound">3"</span>
                    </section>
                    
                    <section class="server clearfix">
                        <span>
                            <p class = "name">客人</p>
                            <img class = "user-img" src="../images/user.png">
                        </span>
                        <div>
                            多行12312asdba多行多行12312asdba多行多行12312asdba多行多行12312asdba多行多行12312asdba多行
                        </div>
                    </section>
                    <section class="server clearfix">
                        <span>
                            <p class = "name">客人</p>
                            <img class = "user-img" src="../images/user.png">
                        </span>
                        <div style = "width:50%">
                            <i class="iconfont sound chart-yuyinshuru"></i>
                        </div>
                        <span class = "sound">30"</span>
                    </section> -->
                </div>
            
        </div>
        <div class = "mui-footer">
            <!-- 底部消息编辑 -->
            <div class = "mui-footer-bar">
                <a href="javascript:;" class = "icon icon-left" id = "input-button">
                    <i class="iconfont chart-yuyin"></i>
                    <!-- <i class="iconfont chart-ai-keyboard"></i> -->
                </a>
                <div class="mui-footer-input noselect" id = "input-rect">
                    <input type="text" name="msg" id="input-rect-input" value="" />
                    <button class = "mui-hidden" id="input-rect-msg">长按 说话</button>
                </div>
                <a href="javascript:;" class = "icon icon-right" id = "add-button">
                    <i class="iconfont chart-jia1"></i>
                </a>
                <button type="button" class="send mui-btn-success button icon-right mui-hidden" id="send-mess">发送</button>
            </div>
            <!-- 底部功能选择 -->
            <ul class = "mui-footer-tool">
                <li id = "pic-tool">
                    <i class="iconfont chart-tupian"></i>
                    <p class = "text">相册</p>
                </li>
                <li id = "camera-tool">
                    <i class="iconfont chart-xiangji"></i>
                    <p class = "text">拍摄</p>
                </li>
                <!-- <li><i class="iconfont chart-icon_video"></i><p class = "text">视频通话</p></li> -->
                <!-- <li><i class="iconfont chart-weizhi"></i><p class = "text">位置</p></li> -->
            </ul>
        </div>
        <script src="../js/mui.min.js"></script>
        <script src="../js/jquery-2.1.0.js"></script>
        <script src="../js/imageUnitl.js" type="text/javascript"></script>
        <script src="../js/audioUnitl.js" type="text/javascript"></script>
        <script src="../js/socket.io.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/chart.js"></script>

        <script type="text/javascript">
            mui.init({
                swipeBack: true,//启用右滑关闭功能
                gestureConfig:{
                    longtap:false,
                    hold:true,//默认为false，不监听
                    release:true//默认为false，不监听
                }
            })

            var mask = mui.createMask(function(){
                $(".mui-backdrop").empty()
            });
            
            mui.plusReady(function() {

                
                // mask.show();//显示遮罩
                // mask.close();//关闭遮罩

                var userId = genUid();
                var audioAllTime = 20;
                // sokcket连接
                var userInfo={
                    'userid':userId,
                    'username':"text"
                };
                //连接socket后端服务器
                var socket=io.connect("ws://101.132.243.231:8088");
                //通知用户有用户登录
                socket.emit('login',userInfo);
                //监听新用户登录
                socket.on('login',function (o) {
                    updateMsg(o, 'login');
                });
                //监听用户退出
                socket.on('logout',function (o) {
                    updateMsg(o, 'logout');
                });

                //接收发送消息
                socket.on('message',function (obj) {
                    // 通过用户id判断展示位置和内容标签
                    // <div style = "width:30%">
                    //         <i class="iconfont sound chart-yuyinshuru"></i>
                    //     </div>
                    var content = '<div>'+obj.content+'</div>';
                    console.log(obj.audio)
                    if(obj.img){
                        content = '<div><img class = "mess-img" src="data:image/png;base64,'+obj.img+'"></div>';
                    }else if(obj.audio){
                        var ptime = obj.time/audioAllTime;
                        if(ptime>1){
                            ptime = 1;
                        }else if(ptime < 0.2){
                            ptime = 0.2;
                        }
                        var length = "width:"+ptime*50+"%;"
                        content = '<div class = "mess-audio" style = '+length+' str="data:audio/amr;base64,'+obj.audio+'"><i class="iconfont sound chart-yuyinshuru"></i></div>'+'<span class = "sound">'+Math.ceil(obj.time)+'"</span>';

                    }
                    if(obj.userid==userId) {
                        var MsgHtml='<section class="user clearfix">'
                                            +'<span><p class = "name">'+obj.username+'</p><img class="user-img" src="../images/user.png"></span>'
                                            +content
                                         +'</section>';
                    }else{
                        var MsgHtml='<section class="server clearfix">'
                                             +'<span><p class = "name">'+obj.username+'</p><img class="user-img" src="../images/user.png"></span>'
                                             +content
                                          +'</section>';
                    }
                    // 插入内容 滚动底部
                    $('.main-body').append(MsgHtml);
                    $('.main-body').scrollTop(99999);
                    // chart.scrollBottom()
                    $(".mess-img").unbind("click").click(function(){
                        var img = $(this).clone();
                        img.removeClass("mess-img")
                        mask.show();
                        $(".mui-backdrop").append(img)
                    })

                    $(".mess-audio").unbind("click").click(function(){
                        var str = $(this).attr("str");
                        audioUnitl.dataURL2Audio(str, function(entry){
                            var toURL = entry.toURL();
                            // 播放音频
                            audioUnitl.playAudio(toURL);
                        })
                    })
                })

                function  genUid() {
                    return new Date().getTime()+""+Math.floor(Math.random()*899+100);
                }

                function logout(){
                    socket.disconnect();
                    location.reload();
                }
                /*监听函数*/
                function updateMsg(o,action) {
                    //当前在线列表
                    var onlineUser=o.onlineUser;
                    //当前在线数
                    var onlineCount=o.onlineCount;
                    //新加用户
                    var user=o.user;
                    //更新在线人数
                    // var userList='';
                    // var separator = '';
                    // for(key in onlineUser){
                    //     userList+=separator+onlineUser[key];
                    //     separator = '、';
                    // }
                    //跟新房间信息
                    // $('.chatNum').text(onlineCount);
                    // $('.chatList').text(userList);
                    // $('.info').attr("title", userList)
                    //系统消息
                    if(action=='login'){
                        var sysHtml='<section class="chatRoomTip"><div>'+user.username+'来了</div></section>';
                    }
                    if(action=="logout"){
                        var sysHtml='<section class="chatRoomTip"><div>'+user.username+'已经退出</div></section>';
                    }
                    // 插入内容 滚动底部
                    $(".main-body").append(sysHtml);
                    $('.main-body').scrollTop(99999);
                }


                //发送消息
                $('#send-mess').click(function () {
                    var content=$('#input-rect').find("input").val();
                    if (content){
                        var obj={
                            'userid':userInfo.userid,
                            'username':userInfo.username,
                            'content':content
                        }
                        socket.emit('message',obj);
                        $('#input-rect').find("input").val("");
                        chart.changeSend("")
                    }
                })


                // 调用h5+原生接口  图片选择
                // 发送图片
                function sendPic(urlImg){
                    var obj={
                        'userid':userInfo.userid,
                        'username':userInfo.username,
                        'img':urlImg
                    }
                    socket.emit('message',obj);
                }
                // 图片选择
                chart.picToolInit(function(urlImg){
                    sendPic(urlImg)
                })
                // 照相
                chart.cameraToolInit(function(urlImg){
                    sendPic(urlImg)
                })


                chart.audioInit(function(audio, time){
                    var obj={
                        'userid':userInfo.userid,
                        'username':userInfo.username,
                        'audio':audio,
                        "time":time/1000
                    }
                    socket.emit('message',obj);
                })
            })

            chart.init()
        </script>
    </body>

</html>